<template>
  <div>
    {{fullName}}
    <div>
      <button @click="changeName">修改Name</button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  setup() {
    const fristName = ref('张三')
    const lastName = ref('李四')
    // const fullName = computed(() => fristName.value + lastName.value)
    // 使用get和set
    const fullName = computed({
      get: () => fristName.value + ' ' + lastName.value,
      set(newValue) {
        const newName = newValue.split(' ')
        fristName.value = newName[0]
        lastName.value = newName[1]
      }
    })
    const changeName = () => {
      // fristName.value = '王五'
      fullName.value = '李四 王五'
    }
    return {
        fristName,
        lastName,
        fullName,
        changeName
    } 
  }
}
</script>

<style>

</style>